import React, { FC, useState, useEffect } from "react"
import styles from "./TabReport.less"
import LabelWraper from "@/components/LabelWraper"
import LabelCard, { columnsProps } from "@/components/LabelCard"
import TextList, { TextType } from "@/components/TextList"
import { history, connect, Dispatch, Loading } from "umi"
import { IDetailState } from "@/models/consultationDetailModel"
import { ConsultationDetailProp } from "../index"
import { IConsultUserL, IConsultReport, IConsultHistory } from "@/services/consultationDetail"
import ConsultHistoryItem from "../ConsultHistoryItem/ConsultHistoryItem"



interface AnnotationPro {
  title: string,
  children: React.ReactNode
  style?: React.CSSProperties
}


/**
 * 患者基础信息
 */
const baseColumns: columnsProps = [
  {
    label: "姓名",
    prop: "patientName",
    rowId: 1
  },
  {
    label: "性别",
    prop: "patientSexRes",
    rowId: 1
  },
  {
    label: "年龄",
    prop: "patientAge",
    rowId: 1
  },
  {
    label: "住院号",
    prop: "patientCard",
    rowId: 2
  },
  {
    label: "申请科室",
    prop: "deptName",
    rowId: 2
  },
  {
    label: "",
    prop: "aa",
    rowId: 2
  },
  {
    label: "主要诊断",
    prop: "diagnosis",
    rowId: 3
  }
]

const mdtCloumsMdt: columnsProps = [
  {
    label: "MDT目标",
    prop: "goal",
    rowId: 1
  },
  {
    label: "MDT时间",
    prop: "startTime",
    rowId: 2
  },
  {
    label: "申 请 人",
    prop: "applierName",
    rowId: 2
  }
]

let mdtModel = {}

/**
 * 病史参数类型及说明
 */

const consultHistoryTypeList: Array<TextType> = [
  {
    prop: "time",
    propDesc: "时间"
  },
  {
    prop: "description",
    propDesc: "详情"
  }

]

/**
 * 病史数据列表
 */
let consultHistoryTList: Array<IConsultHistory> = []

/**
 * 专家介绍及意见
 */

let expertOpinionList: Array<any> = []

const expertOpinionTypeList: Array<TextType> = [
  {
    prop: "username",
    propDesc: "会诊成员名称"
  },
  {
    prop: "hospitalName",
    propDesc: "所在医院"
  },
  {
    prop: "deptName",
    propDesc: "科室名称"
  },
  {
    prop: "titleName",
    propDesc: "医生职称"
  },
  {
    prop: "advise",
    propDesc: "	医生意见"
  },


]


const Annotation = (prop: AnnotationPro) => {
  const { title, children, style } = prop
  return (
    <div className={styles.annotationBox} style={style ? style : {}}>
      <div className={styles.title}>{title}</div>
      {children}
    </div>
  )
}


type TabReportProp = ConsultationDetailProp

const tabReport: FC<TabReportProp> = ({ conDetail, dispatch, loading }) => {

  const [consultReport, setConsultReport] = useState<IConsultReport>()
  const [consultHistoryItem, setConsultHistoryItem] = useState<IConsultHistory>()

  /**
   * 初始化数据
   */

  const initTabReport = () => {
    (conDetail?.consultReport) && (setConsultReport(conDetail.consultReport));
    (conDetail?.consultReport?.consultHistoryList) && (consultHistoryTList = conDetail.consultReport.consultHistoryList);
    (conDetail.consultReport && conDetail.consultReport.consultHistoryList.length > 0) && (setConsultHistoryItem(conDetail.consultReport.consultHistoryList[0]));
    (conDetail.consultReport?.consultUsers) && (expertOpinionList = conDetail.consultReport.consultUsers);
    (conDetail.consultReport) && (mdtModel = conDetail.consultReport)

  }

  const baseLoading = loading.models.conDetail.consultReport

  // 选择病历历史
  const selectHistoryCard = (id: number) => {
    const newconsultHistoryItem: IConsultHistory | undefined = consultHistoryTList.find(item => item.id === id)
    setConsultHistoryItem(newconsultHistoryItem)
  }

  useEffect(() => {
    initTabReport()
  }, [conDetail.consultReport])

  return (
    <div className={styles.tabReportBox}>
      <Annotation title="一、患者信息">
        <LabelWraper
          loading={baseLoading}
          label="基础信息"
          labelWraperHeaderClass={styles.tabReportLabelWraperHeader}
          labelTextClass={styles.tabReportLabelText}
          labelWraperBodyClass={styles.tabReportLabelWraperBody}>
          <LabelCard columns={baseColumns} model={consultReport ? consultReport : {}} />
        </LabelWraper>
        <LabelWraper
          loading={baseLoading}
          label="简要病史"
          labelWraperHeaderClass={styles.tabReportLabelWraperHeader}
          labelTextClass={styles.tabReportLabelText}
          labelWraperBodyClass={styles.tabReportLabelWraperBody}>
          <TextList selectCard={selectHistoryCard} textTypeList={consultHistoryTypeList} modelList={consultHistoryTList} />
        </LabelWraper>
        <LabelWraper
          loading={baseLoading}
          label="检查"
          style={{ boxShadow: "none" }}
          labelWraperHeaderClass={styles.tabReportLabelWraperHeader}
          labelTextClass={styles.tabReportLabelText}
          labelWraperBodyClass={styles.tabReportLabelWraperBody}>
          <ConsultHistoryItem consultHistoryItem={consultHistoryItem} />
        </LabelWraper>
      </Annotation>
      <Annotation title="二、MDT资料" style={{ marginTop: 15 }}>
        <LabelWraper labelWraperBodyClass={styles.tabReportLabelWraperBody} loading={baseLoading}>
          <LabelCard columns={mdtCloumsMdt} model={mdtModel} />
        </LabelWraper>
        <LabelWraper
          loading={baseLoading}
          label="专家介绍和意见"
          style={{ boxShadow: "none" }}
          labelWraperHeaderClass={styles.tabReportLabelWraperHeader}
          labelTextClass={styles.tabReportLabelText}
          labelWraperBodyClass={styles.tabReportLabelWraperBody}>
          <TextList selectCard={() => { }} modelList={expertOpinionList} textTypeList={expertOpinionTypeList} />
        </LabelWraper>
      </Annotation>
      <Annotation title="三、组长总结" style={{ marginTop: 15 }}>
        <LabelWraper loading={baseLoading}>
          {consultHistoryItem ? consultHistoryItem.description : ""}
        </LabelWraper>
      </Annotation>
    </div>
  )
}


const mapStateToProps = ({ conDetail, loading }: { conDetail: IDetailState, loading: Loading }) => {
  return {
    conDetail,
    loading
  }
}
export default connect(mapStateToProps)(tabReport)